<template>
  <!-- 查询模块 -->
  <div class="admsearch">
    <div class="admsearch1">
      <div><p>咨询人姓名</p><vxe-input class="admseainput" v-model="NameConsultant" placeholder="请输入咨询人姓名" clearable></vxe-input></div>
      <div><p>联系电话</p><vxe-input class="admseainput" v-model="phone" placeholder="请输入联系人电话"  clearable></vxe-input></div>
      <div><p>老人姓名</p><vxe-input class="admseainput" v-model="NameOlder" placeholder="请输入老人姓名"  clearable></vxe-input></div>
    </div>
    <div class="admsearch2">
      <p><span>咨询时间</span></p>
      <p>
        <vxe-input v-model="TimeStart" placeholder="日期选择" type="date"></vxe-input>
        <span> - </span>
        <vxe-input v-model="TimeEnd" placeholder="日期选择" type="date"></vxe-input>
      </p>
      <P>
        <vxe-button class="admserbtn" content="查询" status="primary" ></vxe-button>
      </P>
    </div>
  </div>
  <!-- 功能按钮 -->
  <div class="admfunbuts">
    <vxe-button class="btn" content="新增" status="primary" round></vxe-button>
    <vxe-button class="btn" content="删除"  round></vxe-button> 
  </div>
  <!-- 表格 -->
  <div>
    <vxe-table
    :data="tableData">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="老人姓名"></vxe-column>
    <vxe-column field="sex" title="老人身份证号码"></vxe-column>
    <vxe-column field="age" title="委托人姓名"></vxe-column>
    <vxe-column field="age" title="委托人电话"></vxe-column>
    <vxe-column field="age" title="咨询时间"></vxe-column>
    <vxe-column field="age" title="申请项目"></vxe-column>
    <vxe-column field="age" title="接待人"></vxe-column>
    <vxe-column field="age" title="审核状态"></vxe-column>
    <vxe-column field="age" title="操作">
        <template #default="{ row }">
          <vxe-button type="text" @click="delDetail(row)">删除</vxe-button>
          <vxe-button type="text" @click="editDetail(row)">编辑</vxe-button>
          <vxe-button type="text" @click="createDetail(row)">新增入住</vxe-button>
        </template>
    </vxe-column>
  </vxe-table>
  </div>
   
  </template>
  
  
  <script setup>
    import {useRouter} from 'vue-router'//路由
    const router = useRouter()
    import { ref } from 'vue'
    //表格信息
    const tableData = ref([
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
    ])
    // 查询参数
    const NameConsultant = ref('')//咨询人姓名
    const phone = ref('')//联系电话
    const NameOlder = ref('')//老人姓名
    const TimeStart =ref("")//咨询时间起
    const TimeEnd =ref("")//咨询时间尾
    //删除
    const delDetail = (row) => {
      console.log(row)
    }
    //编辑
    const editDetail = (row) => {
      console.log(row)
    }
    //新增
    const createDetail = (row) => {
      router.push('/checkin_home')
    }
  </script>
 
  
  <style scoped></style>
<style lang="less">
.admsearch{
  width: 90%;
  height: 13vh;
  display: flex;
  flex-wrap: wrap;
  .admsearch1{ 
    display: flex;
    width: 80%;
    div{
      width: 35%;
      display: flex;
      p{
        width: 90px;
        height: 34px;
        line-height: 34px;
      }
      .admseainput{
        width: 150px;
      }
    }
  }
  .admsearch2{
    width: 53%;
    display: flex;
    justify-content: space-between;
    .admserbtn{
      width: 100px;
      border-radius: 11px;
    }
  }
}
.admfunbuts{
  text-align: right;
  height: 50px;
  .btn{
    width: 100px;
    border-radius: 11px;
   
  }
}
</style>